<template>
  <body>
  <div class="background">
    <img src="static/background.jpg" width="100%" height="100%" alt=""/>
  </div>
  <el-page-header @back="goBack" content="图书添加" style="margin-top: -2%">
  </el-page-header>
  <div>
    <el-card class="card">
      <H2>图书信息</H2>
      <el-form autocomplete="on"
               :model="Book"
               ref="Book"
               label-position="left"
               label-width="80px"
               :rules="rules">
        <el-form-item style="margin-top: 5%;" prop="BookName" label="书名" class="label-style label-content">
          <el-input name="BookName"
                    v-model="Book.BookName"
                    autocomplete="on"
                    placeholder="请输入书名"
                    clearable
                    style="font-size: 18px">
          </el-input>
        </el-form-item>
        <el-form-item prop="Author" label="作者" class="label-style label-content">
          <el-input name="Author"
                    v-model="Book.Author"
                    autocomplete="on"
                    placeholder="请输入作者"
                    style="font-size: 18px"
                    clearable>
          </el-input>
        </el-form-item>
        <el-form-item prop="Img" label="封面" class="label-style label-content">
          <el-input name="Img"
                    v-model="Book.Img"
                    autocomplete="on"
                    placeholder="请输入封面信息"
                    style="font-size: 18px"
                    clearable>
          </el-input>
        </el-form-item>
        <el-form-item label="类型" style="margin-left:8px " label-width="72px" class="label-style label-content">
          <el-select style="width: 100%;font-size: 18px" v-model="value" placeholder="请选择类型">
            <el-option
              style="font-size: 18px"
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="Publisher" label="出版社" class="label-style label-content">
          <el-input name="Publisher"
                    v-model="Book.Publisher"
                    autocomplete="on"
                    placeholder="请输入出版社"
                    style="font-size: 18px"
                    clearable>
          </el-input>
        </el-form-item>
        <el-form-item prop="Price" label="价格" class="label-style label-content">
          <el-input name="Price"
                    v-model="Book.Price"
                    autocomplete="on"
                    placeholder="请输入价格"
                    style="font-size: 18px"
                    clearable>
          </el-input>
        </el-form-item>
        <el-form-item prop="BNumber" label="数量" class="label-style label-content">
          <el-input name="BNumber"
                    v-model="Book.BNumber"
                    autocomplete="on"
                    placeholder="请输入数量"
                    style="font-size: 18px"
                    clearable>
          </el-input>
        </el-form-item>
        <el-form-item prop="Summary" label="简介" class="label-style label-content" style="color: #000000">
          <font style="color: #0e0d0c">
            <el-input name="Summary"
                      type="textarea"
                      :rows="4"
                      v-model="Book.Summary"
                      style="height: 100%;font-size: 18px;color: #0e0d0c"
                      autocomplete="on"
                      placeholder="请输入简介"
                      clearable>
            </el-input>
          </font>
        </el-form-item>
        <el-form-item>
          <el-button
            style="background: darkslateblue;font-size: 18px;margin-left: -10%"
            type="primary"
            @click.native.prevent="add"
          >添加
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
  </body>
</template>

<script>
  export default {
    data() {
      return {
        Book: {
          BookId: '',
          TypeId: '',
          Img: '',
          BookName: '',
          Author: '',
          Publisher: '',
          Price: '',
          Summary: '',
          BNumber: ''
        },
        rules: {
          Img: [{required: true, message: '封面不能为空', trigger: 'blur'}],
          BookName: [{required: true, message: '书名不能为空', trigger: 'blur'}],
          Author: [{required: true, message: '作者不能为空', trigger: 'blur'}],
          Publisher: [{required: true, message: '出版社不能为空', trigger: 'blur'}],
          Price: [{required: true, message: '价格不能为空', trigger: 'blur'}],
          Summary: [{required: true, message: '简介不能为空', trigger: 'blur'}],
          BNumber: [{required: true, message: '数量不能为空', trigger: 'blur'}]
        },
        options: [{
          value: '1',
          label: '历史'
        }, {
          value: '2',
          label: '小说'
        }, {
          value: '3',
          label: '地理'
        }, {
          value: '4',
          label: '传记'
        }, {
          value: '5',
          label: '哲学'
        }, {
          value: '6',
          label: '社会学'
        }, {
          value: '7',
          label: '艺术'
        }, {
          value: '8',
          label: '政治'
        }, {
          value: '9',
          label: '建筑'
        }, {
          value: '10',
          label: '戏剧'
        }, {
          value: '11',
          label: '音乐'
        }, {
          value: '12',
          label: '军事'
        }, {
          value: '13',
          label: '数学'
        }, {
          value: '14',
          label: '美术'
        }, {
          value: '15',
          label: '设计'
        }, {
          value: '16',
          label: '佛教'
        }
        ],
        value: '1'
      };
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      add() {
        this.$refs.Book.validate(valid => {
          if (valid) {
            this.$confirm('是否确认添加？', '提示', {}).then(() => {
              this.Book.TypeId = this.value;
              this.$axios.post('/library/addB', this.Book)
                .then(resp => {
                  if (resp.data.code == 200) {
                    this.$alert("添加成功!", '提示', {
                      confirmButtonText: '确定'
                    });
                    this.goBack();
                  }
                });
            }).catch(() => {
              this.$message({
                message: '取消添加',
                type: 'failed'
              })
            });
          } else {
            // eslint-disable-next-line no-console
            console.log("参数验证不合法！");
            return false;
          }
        });
      },
    }
  };
</script>

<style>
  .background {
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    z-index: -1;
    position: fixed;
  }

  .card {
    position: relative;
    width: 800px;
    margin-top: 2%;
    margin-left: 27%;
    padding: 1em;
    background: hsla(0, 0%, 60%, .25) border-box;
    box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .3) inset,
    0 .5em 1em rgba(0, 0, 0, 0.6);
    text-shadow: 0 1px 1px hsla(0, 0%, 100%, .3);
  }

  .label-style .el-form-item__label {
    font-size: 18px;
  }

  .label-content .el-form-item__content {
    font-size: 20px;
    color: #000000;
  }
</style>
